<template>
  <div id="app">
    <Meta pagealias="cityinfolist" :query_data="{cityinfo_cid:cid}" />
    <Head>搜索</Head>
    <div class="searchdiv" @click="toggleSearch">
        <img src="../../assets/images/cityinfo/list/list_6.png" />
        <span :class="params.keywords ? 'isnull' : ''">{{ params.keywords ? params.keywords : "请输入关键词"}}</span>
    </div>
    <van-popup
    v-model="show"
    position="top"
    :overlay="true"
    :style="{ height: '90%', width: '100%' }"
    @click-overlay="toggleSearchtwo"
    >
      <TopSearch
          type="tcjoblist"
          @hideSearch="toggleSearchtwo"
          @doSearch="doSearchByKeyword"
      ></TopSearch>
    </van-popup>
    <van-list
      class="list"
      v-model="loading"
      :finished="finished"
      :finished-text="finished_text"
      @load="onLoad"
      :immediate-check="false"
      v-if="show_empty != true"
    >
      <div
        class="item"
        v-for="(item, index) in list"
        :key="index"
        @click="handleJump(item,'item')"
      >
        <div class="name" :class="item.desc&&item.desc.length > 80 ? 'more':''" v-if="item.is_all!=1">
          <span v-if="item.is_top==1" class="top">置顶</span>
          <span :class="item.is_top==1 ? 'text text_indent' : 'text'" >{{item.desc}}</span>
          <span class="all" v-if="item.desc&&item.desc.length > 80" @click.stop="lookall(index)">全文</span>
        </div>
        <Fulltext :id="item.id" :is_top="item.is_top" v-if="parseInt(item.is_all)===1"></Fulltext>
        <div class="imgs" v-if="item.img_arr.length > 0">
          <div v-for="(itemtwo, indextwo) in item.img_arr" :key="indextwo" class="img">
            <img v-if="indextwo < 4" :src="itemtwo"/>
          </div>
          <div v-if="item.img_arr.length > 4" class="imgnum">共{{item.img_arr.length}}张图片</div>
        </div>
        <div class="bottom">
          <div class="info">
            <div class="label">{{item.type_name}}</div>
            <span>{{item.view_times}}人浏览</span><span>{{item.refreshtime}}</span>
          </div>
          <div class="call" @click.stop="handleJump(item,'tel')"><div class="img">拨号</div></div>
        </div>
      </div>
    </van-list>
    <van-empty
      image="search"
      description="没有找到对应的数据"
      style="background-color:#fff"
      v-if="show_empty === true"
    />
    <van-popup
      v-model="showLogin"
      position="right"
      :overlay="false"
      style="width:100%;height:100%"
    >
      <Login
        :utype="2"
        :single_login="true"
        @afterLogin="afterLogin"
        :after_login_data="after_login_data"
        :goback_custom="true"
        @gobackCustomMethod="closeLogin"
      ></Login>
    </van-popup>
  </div>
</template>
<script>
import http from '@/utils/http'
import api from '@/api'
import Fulltext from './components/fulltext.vue'
import Login from '@/components/Login'
export default {
  components: {
    Fulltext,
    Login
  },
  data () {
    return {
      loading: false,
      finished: false,
      finished_text: '',
      show: true,
      iskey: false,
      page: 1,
      pagesize: 15,
      show_empty: false,
      params: {
        keywords: ''
      },
      list: [],
      showLogin: false,
      after_login_data: {},
      is_personal_login: false,
      JumpItem: null
    }
  },
  created () {
    this.is_personal_login = this.$store.state.LoginOrNot === true && this.$store.state.LoginType === 2
  },
  methods: {
    onLoad () {
      this.page++
      this.fetchData(false)
    },
    // 关键词搜索函数，重置所有参数，并且把当前页设置为第一页
    doSearchByKeyword (data) {
      this.iskey = true
      for (const key in this.params) {
        this.params[key] = ''
      }
      this.params.keywords = data.keyword
      this.page = 1
      this.fetchData(true)
    },
    toggleSearch () {
      this.show = !this.show
    },
    toggleSearchtwo () {
      this.show = !this.show
      if (!this.iskey) {
        window.history.length > 1
          ? this.$router.go(-1)
          : this.$router.push('/')
      }
    },
    fetchData (init) {
      this.show_empty = false
      let conditions = { ...this.params }
      if (init === true) {
        this.page = 1
        this.finished_text = ''
        this.finished = false
      }
      conditions.page = this.page
      conditions.pagesize = this.pagesize
      if (!this.params.keywords) {
        conditions.search_type = 'all'
      }
      this.loading = true
      http
        .get(api.city_list, conditions)
        .then((res) => {
          if (init === true) {
            this.list = [...res.data.list]
          } else {
            this.list = this.list.concat(res.data.list)
          }

          // 加载状态结束
          this.loading = false

          // 数据全部加载完成
          if (res.data.list.length < this.pagesize) {
            this.finished = true
            if (init === false) {
              this.finished_text = '没有更多了'
            } else if (res.data.list.length === 0) {
              this.show_empty = true
            }
          }
        })
        .catch(() => {})
    },
    lookall (index) {
      this.list[index].is_all = 1
      this.list = this.list.map(function (item) {
        return item
      })
      console.log(this.list)
    },
    // 列表跳转
    handleJump (val, type) {
      this.JumpItem = val
      if (type == 'item') {
        this.$router.push({
          path: '/cityinfo/info/' + val.id,
          query: {
            pid: val.pid,
            telState: type
          }
        })
      } else {
        if (this.is_personal_login === false) {
          this.$dialog
            .confirm({
              title: '提示',
              message: '当前操作需要登录求职者账号',
              confirmButtonText: '去登录'
            })
            .then(() => {
              this.showLogin = true
              this.after_login_data = {
                method: 'contactHim'
              }
            })
            .catch(() => {})
        } else {
          http.get(api.article_info, {id: val.id}).then(res => {
            if (!res.data.need_pay_for_mobile || (res.data.need_pay_for_mobile && res.data.paid)) {
              window.location.href = 'tel:' + res.data.mobile
            } else {
              this.$router.push({
                path: '/cityinfo/info/' + val.id,
                query: {
                  pid: val.pid,
                  telState: type
                }
              })
            }
          })
        }
      }
    },
    afterLogin () {
      this.showLogin = false
      http.get(api.article_info, {id: this.JumpItem.id}).then(res => {
        if (!res.data.need_pay_for_mobile || (res.data.need_pay_for_mobile && res.data.paid)) {
          window.location.href = 'tel:' + res.data.mobile
        } else {
          this.$router.push({
            path: '/cityinfo/info/' + this.JumpItem.id,
            query: {
              pid: this.JumpItem.pid,
              telState: 'tel'
            }
          })
        }
      })
    },
    closeLogin () {
      this.showLogin = false
    }
  }
}
</script>
<style lang="scss" scoped>
.searchdiv {
    height: 38px;
    border-radius: 30px;
    margin-top: 15px;
    margin-left: 16px;
    margin-right: 16px;
    padding-left: 12px;
    background-color: #ffffff;
    border: 1px solid #d0d0d0;
    display: flex;
    align-items: center;
    img {
    margin-right: 8px;
    width: 15px;
    height: 15px;
    }
    span {
    color: #b4bdc9;
    font-size: 15px;
    &.isnull{
          color: #333333;
      }
    }
}
.list{
  height: calc(100vh - 53px - 63px);
  margin-top: 10px;
  overflow: auto;
    .item{
        padding: 16px 19px 16px 17px;
        border-bottom: 5px solid #f8f8f8;
        .name{
            position: relative;
            font-size: 0px;
            color: #333333;
            .top{
              position: absolute;
              left: 0;
              top: 0;
              background-color: #ff4949;
              color: #FFFFFF;
              font-size: 10px;
              padding: 2px 5px;
              margin-right: 5px;
              border-radius: 3px;
            }
            .all{
              position: absolute;
              bottom: 0;
              right: 80px;
              z-index: 1;
              cursor: pointer;
              color: #ff4949;
              font-size: 14px;
            }
            .text{
              display: inline-block;
              font-size: 14px;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 3;
              overflow: hidden;
            }
            .text_indent{
              text-indent: 2.5em;
            }
        }
        .more::after{
            content: "....";
            position: absolute;
            font-size: 14px;
            bottom: 0;
            right: 0;
            padding-right: 120px;
            padding-left: 4px;
            background: linear-gradient(to right, rgba(255,255,255,0),rgba(255,255,255,1) 0%);
        }
        .imgs{
          margin-top: 12px;
          position: relative;
          display: flex;
          .img,img{
            width: 77px;
            height: 55px;
            margin-right: 11px;
          }
          .imgnum{
            width: 77px;
            height: 55px;
            position: absolute;
            font-size: 11px;
            color: #ffffff;
            right: -2px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: rgba(0,0,0,0.6);
          }
        }
        .bottom{
          margin-top: 17px;
          position: relative;
          display: flex;
          align-items: center;
          font-size: 12px;
          color: #999999;
          .info{
            display: flex;
            align-items: center;
            .label{
              border: 1px solid #1787fb;
              color: #1787fb;
              padding: 2px;
              border-radius: 3px;
            }
            span{
              margin-left: 12px;
            }
          }
          .call{
            width: 81px;
            height: 34px;
            position: absolute;
            right: 0;
            background: url("../../assets/images/cityinfo/index/index_58.png") 0 center no-repeat;
            background-size: 81px 34px;
            display: flex;
            justify-content: center;
            align-items: center;
            padding-bottom: 3px;
            .img{
              height: 15px;
              background: url("../../assets/images/cityinfo/index/index_57.png") 0px center no-repeat;
              background-size: 12px 15px;
              color: #ffffff;
              padding-left: 18px;
              font-size: 13px;
              font-weight: bold;
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }
        }
    }
}
.list::-webkit-scrollbar{
    display: none;
}
</style>
